<template>
  <div>
    <div class="top">
      <el-dropdown trigger="click" @command="handleCommand">
        <el-button
          type="primary"
          style="height: 30px; padding: 0 15px; border-radius: 3px"
          >新增</el-button
        >
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in eventMenuList"
            :key="item.value"
            :command="item.value"
            >{{ item.text }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-table
      v-loading="loading"
      :data="tableList"
      style="width: 100%"
      border
      height="400px"
      id="table"
      ref="table"
      :header-cell-style="{
        background: '#f5f5f5',
        'text-align': 'center',
      }"
    >
      <template slot="empty">
        <el-empty description="暂无数据"></el-empty>
      </template>
      <el-table-column align="center" prop="actionEvent" label="事件动作">
      </el-table-column>
      <el-table-column align="center" prop="actionType" label="事件类型">
        <template slot-scope="scope">
          {{ eventMenuList.find((i) => i.value == scope.row.actionType)?.text }}
        </template>
      </el-table-column>
      <el-table-column prop="fieldLength" label="事件定义"> </el-table-column>
      <el-table-column prop="fieldAccuracy" label="条件定义"> </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <div class="table-cz">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-edit"
                @click="edit(scope.row)"
              ></i
            ></el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <i
                style="font-size: 14px; color: red; cursor: pointer"
                class="el-icon-delete"
                @click="del(scope.row)"
              ></i
            ></el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="上移"
              placement="top"
            >
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-upload2"
                @click="move('up', scope.row)"
              ></i
            ></el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="下移"
              placement="top"
            >
              <i
                style="
                  font-size: 14px;
                  color: rgb(64, 149, 229);
                  cursor: pointer;
                "
                class="el-icon-download"
                @click="move('down', scope.row)"
              ></i
            ></el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="条件配置"
              placement="top"
            >
              <img
                style="width: 14px; height: 14px; cursor: pointer"
                src="@/assets/image/tjpz.png"
            /></el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-dialog
      :show-close="true"
      :visible.sync="dialogVisible"
      width="500px"
      v-if="dialogVisible"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="diaClose"
      append-to-body
      :center="true"
    >
      1
      <EditDialog @diaClose="diaClose"></EditDialog>
    </el-dialog> -->
    <nt-dialog
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="500px"
      @diaClose="diaClose"
    >
      <nt-form
        @submit="submit"
        @diaClose="diaClose"
        :commonData="{
          id: EventData.componentId,
        }"
        :FormList="FormList"
        :defData="defData"
      ></nt-form>
    </nt-dialog>
  </div>
</template>

<script>
import {
  addCodeConvertApi,
  addComboCodeFilterApi,
  addComboCustomFilterApi,
  addComboDbFilterApi,
  addDbConvertApi,
  addSetCodeNameApi,
  addSetDbValueApi,
  addSetDisableStateApi,
  addSetReadonlyStateApi,
  addSetScriptValueApi,
  delViewActionApi,
  downViewActionApi,
  editCodeConvertApi,
  editComboCodeFilterApi,
  editComboCustomFilterApi,
  editComboDbFilterApi,
  editDbConvertApi,
  editSetCodeNameApi,
  editSetDbValueApi,
  editSetDisableStateApi,
  editSetReadonlyStateApi,
  editSetScriptValueApi,
  getActionDataApi,
  getComponentActionListApi,
  getEventMenuApi,
  upViewActionApi
} from '@/api/Device-all/Device-view'
import ntDialog from '@/components/nt-dialog.vue'
import NtForm from '@/components/nt-form'
import {
  ConvertCodeAction,
  ConvertSqlAction,
  SelectFilterCodeAction,
  SelectFilterSqlAction,
  CustomAction,
  SetCodeNameAction,
  SetSqlValueAction,
  SetELValueAction,
  SetDisableAction,
  SetReadOnlyAction
} from './EventOptions'
export default {
  components: { ntDialog, NtForm },
  props: ['EventData'],

  data () {
    return {
      status: 'add',
      loading: false,
      defData: {},
      type: '',
      tableList: [],
      eventMenuList: [],
      dialogVisible: false,
      FormList: []
    }
  },
  created () {
    this.getEventMenu()
    this.getComponentActionList()
  },

  methods: {
    // 获取事件子菜单列表
    async getEventMenu () {
      const res = await getEventMenuApi()
      this.eventMenuList = res.data.list
    },
    // 列表数据
    async getComponentActionList () {
      this.loading = true
      const res = await getComponentActionListApi(this.EventData.componentId)
      this.tableList = res.data.list
      this.loading = false
    },
    // 查询视图组件事件动作信息
    async getActionData (id) {
      const res = await getActionDataApi(id)
      this.defData = res.data.entity
    },
    handleCommand (command) {
      this.status = 'add'
      this.detectEvent(command)
      this.dialogVisible = true
    },
    // 保存
    async submit (item) {
      const data = { componentId: this.EventData.componentId, ...item }
      if (this.status === 'add') {
        const res =
          this.type === 'ConvertCodeAction'
            ? await addCodeConvertApi(data)
            : this.type === 'ConvertSqlAction'
              ? await addDbConvertApi(data)
              : this.type === 'SelectFilterCodeAction'
                ? await addComboCodeFilterApi(data)
                : this.type === 'SelectFilterSqlAction'
                  ? await addComboDbFilterApi(data)
                  : this.type === 'CustomAction'
                    ? await addComboCustomFilterApi(data)
                    : this.type === 'SetCodeNameAction'
                      ? await addSetCodeNameApi(data)
                      : this.type === 'SetSqlValueAction'
                        ? await addSetDbValueApi(data)
                        : this.type === 'SetELValueAction'
                          ? await addSetScriptValueApi(data)
                          : this.type === 'SetDisableAction'
                            ? await addSetDisableStateApi(data)
                            : this.type === 'SetReadOnlyAction'
                              ? await addSetReadonlyStateApi(data)
                              : ''
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.message,
            duration: 2000
          })
          this.diaClose()
          this.getComponentActionList()
        } else {
          this.$message({
            type: 'error',
            message: res.message,
            duration: 2000
          })
        }
      } else {
        const res =
          this.type === 'ConvertCodeAction'
            ? await editCodeConvertApi(data)
            : this.type === 'ConvertSqlAction'
              ? await editDbConvertApi(data)
              : this.type === 'SelectFilterCodeAction'
                ? await editComboCodeFilterApi(data)
                : this.type === 'SelectFilterSqlAction'
                  ? await editComboDbFilterApi(data)
                  : this.type === 'CustomAction'
                    ? await editComboCustomFilterApi(data)
                    : this.type === 'SetCodeNameAction'
                      ? await editSetCodeNameApi(data)
                      : this.type === 'SetSqlValueAction'
                        ? await editSetDbValueApi(data)
                        : this.type === 'SetELValueAction'
                          ? await editSetScriptValueApi(data)
                          : this.type === 'SetDisableAction'
                            ? await editSetDisableStateApi(data)
                            : this.type === 'SetReadOnlyAction'
                              ? await editSetReadonlyStateApi(data)
                              : ''
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.message,
            duration: 2000
          })
          this.diaClose()
          this.getComponentActionList()
        } else {
          this.$message({
            type: 'error',
            message: res.message,
            duration: 2000
          })
        }
      }
    },
    // 判断当前事件
    detectEvent (event) {
      this.type = event
      if (event === 'ConvertCodeAction') {
        this.FormList = ConvertCodeAction
      } else if (event === 'ConvertSqlAction') {
        this.FormList = ConvertSqlAction
      } else if (event === 'SelectFilterCodeAction') {
        this.FormList = SelectFilterCodeAction
      } else if (event === 'SelectFilterSqlAction') {
        this.FormList = SelectFilterSqlAction
      } else if (event === 'CustomAction') {
        this.FormList = CustomAction
      } else if (event === 'SetCodeNameAction') {
        this.FormList = SetCodeNameAction
      } else if (event === 'SetSqlValueAction') {
        this.FormList = SetSqlValueAction
      } else if (event === 'SetELValueAction') {
        this.FormList = SetELValueAction
      } else if (event === 'SetDisableAction') {
        this.FormList = SetDisableAction
      } else if (event === 'SetReadOnlyAction') {
        this.FormList = SetReadOnlyAction
      } else {
        // Handle unknown event
        this.FormList = [] // or any other default value
      }
    },
    // 编辑
    async edit (item) {
      this.status = 'edit'
      console.log(item)
      await this.getActionData(item.actionId)
      await this.detectEvent(item.actionType)
      this.dialogVisible = true
    },
    // 删除
    async del (item) {
      this.$confirm('此操作将删除该视图组件动作事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const res = await delViewActionApi(item.actionId)
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.message,
                duration: 2000
              })
              this.getComponentActionList()
            } else {
              this.$message({
                type: 'error',
                message: res.message,
                duration: 2000
              })
            }
          } catch (e) {
            console.log(e)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 移动
    async move (type, item) {
      this.$confirm('此操作将移动该视图组件动作事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res =
            type === 'up'
              ? await upViewActionApi(item.actionId)
              : await downViewActionApi(item.actionId)
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: res.message,
              duration: 2000
            })
            this.getComponentActionList()
          } else {
            this.$message({
              type: 'error',
              message: res.message,
              duration: 2000
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消移动'
          })
        })
    },
    diaClose () {
      this.dialogVisible = false
    }
  }
}

</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.table-cz {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
